import type { Metadata } from "next";
import Nav from "@/base-framework/landing/Nav";
import Hero from "@/base-framework/landing/Hero";
import Footer from "@/base-framework/landing/Footer";
import type { LandingData } from "@/base-framework/types/landing";

// 动态导入所有配置文件
import seoData from "@/base-framework/content/terms/seo.json" assert { type: "json" };
import heroData from "@/base-framework/content/terms/hero.json" assert { type: "json" };
import contentData from "@/base-framework/content/terms/content.json" assert { type: "json" };
import footerData from "@/base-framework/content/terms/footer.json" assert { type: "json" };

const termsOfService: LandingData = {
  seo: seoData,
  hero: heroData,
  content: contentData,
  footer: footerData
};

export function generateMetadata(): Metadata {
  const s = termsOfService.seo;
  return {
    title: s.title,
    description: s.description,
    alternates: s.canonical ? { canonical: s.canonical } : undefined,
    keywords: s.keywords,
  };
}

export default function TermsOfService() {
  return (
    <div className="min-h-screen">
      <Nav />
      <main id="main">
        <Hero data={termsOfService.hero} />
        <section className="w-full">
          <div className="mx-auto max-w-screen-xl px-6 py-8">
            {termsOfService.content?.sections.map((section, index) => (
              <div key={index} className="mb-12">
                <h2 className="text-2xl font-semibold mb-4">{section.title}</h2>
                <p className="text-foreground/80 mb-4">{section.content}</p>
                {section.items && (
                  <ul className="space-y-4">
                    {section.items.map((item, itemIndex) => (
                      <li key={itemIndex} className="border-l-4 border-blue-500 pl-4 py-1">
                        <h3 className="font-medium">{item.title}</h3>
                        <p className="text-foreground/70">{item.description}</p>
                      </li>
                    ))}
                  </ul>
                )}
                {section.contact && (
                  <div className="mt-4 p-4 bg-gray-100 dark:bg-gray-800 rounded-lg">
                    <p className="font-medium">联系方式：</p>
                    {section.contact.email && (
                      <p>电子邮箱：<a href={`mailto:${section.contact.email}`} className="text-blue-600 dark:text-blue-400 hover:underline">{section.contact.email}</a></p>
                    )}
                    {section.contact.address && (
                      <p>地址：{section.contact.address}</p>
                    )}
                  </div>
                )}
              </div>
            ))}
          </div>
        </section>
      </main>
      <Footer data={termsOfService.footer} />
    </div>
  );
}